import React, { Component } from 'react'
import { Button, Icon, Modal, Radio, message } from 'antd';
import SubjectShow from './SubjectShow';
import EditQuestionTitle from './EditQuestionTitle';

// const IconFont = Icon.createFromIconfontCN({
//     scriptUrl: 'http://at.alicdn.com/t/font_1616893_k37chxv0z3.js',
// });

const error = (msg) => {
    message.error(msg);
};

export default class QuestionContent extends Component {
    constructor(props) {
        super(props);

        this.state = {
            addIsMouse: false,
            visible: false,
            confirmLoading: false,
            value: null,
            addSubjectList: [], // 要传给后端的问卷题目
            inputValue: '问卷题目', // 要传给后端的问卷标题
            isSubmit: false,
        }
    }

    // 处理添加题目的触摸效果
    handleAddMouseOver = () => {
        this.setState({
            addIsMouse: true
        });
    }

    handleAddMouseOut = () => {
        this.setState({
            addIsMouse: false
        });
    }

    setModalVisible(modalVisible) {
        this.setState({ modalVisible });
    }

    // 显示对话框
    showModal = () => {
        this.setState({
            visible: true,
        });
    };

    // 在对话框中选择不同选项所增加的题目
    changeSubject = () => {
        let { value } = this.state;

        let { addSubjectList } = this.state;
        let length = addSubjectList.length;
        switch (value) {
            case 0:
                addSubjectList.push(
                    {
                        index: length,
                        title: '标题',
                        options: [
                            'A',
                            'B',
                            'C',
                            'D'
                        ],
                        isRequired: false,
                        type: 'radio',
                    }
                )
                break;
            case 1:
                addSubjectList.push(
                    {
                        index: length,
                        title: '标题',
                        options: [
                            'A',
                            'B',
                            'C',
                            'D'
                        ],
                        isRequired: false,
                        type: 'checkBox',
                    }
                )
                break;
            case 2:
                addSubjectList.push(
                    {
                        index: length,
                        title: '标题',
                        isRequired: false,
                        type: 'singleText',
                    }
                )
                break;
            case 3:
                addSubjectList.push(
                    {
                        index: length,
                        title: '标题',
                        isRequired: false,
                        type: 'multiline',
                    }
                )
                break;
            default:
        }

        this.setState({
            addSubjectList,
            value: null
        });
    }

    // 选择增加题目
    handleOk = () => {
        if (this.state.value === null) {
            error('增加失败，未选择增加题目的类型');
            this.handleCancel();
            return;
        }

        this.setState({
            confirmLoading: true,
        });

        this.changeSubject();

        setTimeout(() => {
            this.setState({
                visible: false,
                confirmLoading: false,
            });
        }, 2000);
    };

    // 选择取消
    handleCancel = () => {
        this.setState({
            visible: false,
        });
    };

    // 对话框中单选按钮的变化
    onChange = e => {
        this.setState({
            value: e.target.value,
        });
    };

    // 标题的变化
    handleChange = (e) => {
        this.setState({
            inputValue: e.target.value
        });
    }

    // 在点击发布时处理问卷的信息
    handleInputData = (obj, index) => {
        let { addSubjectList } = this.state;

        addSubjectList[index] = obj;

        this.setState({
            addSubjectList
        });
        console.log(addSubjectList);

        // TODO: 传递数据给后端
    }

    handleSubmit = () => {
        this.setState({
            isSubmit: true
        });
    }

    render() {
        const { visible, confirmLoading } = this.state;
        const radioStyle = {
            display: 'block',
            height: '30px',
            lineHeight: '30px',
        };

        return (
            <div style={{
                width: 1200,
                margin: '0 auto',
                marginTop: 40,
            }}>
                <EditQuestionTitle handleChange={this.handleChange} />
                <SubjectShow
                    addSubjectList={this.state.addSubjectList}
                    handleInputData={this.handleInputData}
                    isSubmit={this.state.isSubmit} handleReset={this.handleReset}
                />
                <div style={{
                    width: 1200,
                    backgroundColor: '#fff',
                    boxShadow: '0 2px 4px 0 rgba(0,0,0,.1)',
                    marginTop: 20,
                    paddingTop: 20,
                    paddingBottom: 20
                }}>
                    <div style={{
                        width: 1100,
                        border: (this.state.addIsMouse ? '2px dashed #00CCFF' : '2px dashed #ccc'),
                        position: 'relative',
                        height: 300,
                        margin: '0 auto',
                        cursor: 'pointer'
                    }} onMouseOver={this.handleAddMouseOver} onMouseOut={this.handleAddMouseOut} onClick={this.showModal}>
                        <span
                            className="anticon-portal anticonjia"
                            style={{
                                color: (this.state.addIsMouse ? '#00CCFF' : '#ddd'),
                                width: 50,
                                height: 50,
                                position: 'absolute',
                                left: '50%',
                                marginLeft: -25,
                                top: '50%',
                                marginTop: -25,
                                fontSize: 50
                            }}
                        ></span>
                    </div>
                </div>
                <Modal
                    title="请选择增加的题目类型"
                    visible={visible}
                    onOk={this.handleOk}
                    confirmLoading={confirmLoading}
                    onCancel={this.handleCancel}
                >
                    <Radio.Group onChange={this.onChange} value={this.state.value}>
                        <Radio style={radioStyle} value={0}>
                            单选框
                        </Radio>
                        <Radio style={radioStyle} value={1}>
                            复选框
                        </Radio>
                        <Radio style={radioStyle} value={2}>
                            单行文本框
                        </Radio>
                        <Radio style={radioStyle} value={3}>
                            多行文本框
                        </Radio>
                    </Radio.Group>
                </Modal>
                <Button type="primary" disabled={this.state.addSubjectList.length > 0 ? false : true} style={{
                    marginBottom: 40,
                    marginTop: 40,
                    height: 30,
                    width: 80,
                    position: 'relative',
                    left: '50%',
                    marginLeft: -40
                }} onClick={this.handleSubmit}>发布</Button>
            </div>
        )
    }
}
